<template>
  <div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @clear="clear"
      @handleQuery="getList(1)"
    >
      <el-button v-if="meta.indexOf('ExportCourseInfo') > -1" slot="btns" :loading="loadingExport" type="primary" @click="handleExport">{{ $t('message.daochu') }}</el-button>
    </QueryForm>
    <div class="doumee-filter">
      <div class="margin-t-10 statics-info-li">
        <span class="title">{{ $t('message.ksstj') }}：</span>
        <span class="content">{{ subtotalCountVo.courseTimeNumStatistics || 0 }}</span>

      </div>
      <div class="margin-t-10 statics-info-li">
        <span class="title">{{ $t('message.ksyjtj') }}：</span>
        <span class="content">{{ subtotalCountVo.courseUnitPriceStatistics || 0 }}</span>
      </div>
      <div class="margin-t-10 statics-info-li">
        <span class="title">{{ $t('message.kssfjtj') }}：</span>
        <span class="content">{{ subtotalCountVo.realUnitPriceStatistics || 0 }}</span>
      </div>
    </div>
    <el-table
      ref="tableRef"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        :label="$t('message.jlxm')"
        prop="teacherName"
        show-overflow-tooltip
        min-width="120"
      />
      <el-table-column align="center" :label="$t('message.sjh')" prop="phone" min-width="120" show-overflow-tooltip />
      <el-table-column
        align="center"
        :label="$t('message.kcmc')"
        prop="courseName"
        min-width="150"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.ksyj')"
        prop="courseUnitPrice"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.kssfj')"
        prop="realUnitPrice"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.sksj')"
        prop="classTime"
        min-width="240"
        show-overflow-tooltip
      />
      <el-table-column align="center" :label="$t('message.kclx')" min-width="80">
        <template slot-scope="scope">
          {{ scope.row.type == "0" ? $t('message.cgk') : $t('message.sjk') }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('message.kszt')" min-width="80">
        <template slot-scope="scope">
          {{ scope.row.status == "1" ? $t('message.ysk') : $t('message.wski') }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.qdxy')"
        prop="num"
        min-width="80"
      />
      <el-table-column
        align="center"
        :label="$t('message.wqdxy')"
        prop="unNum"
        min-width="100"
      />
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="handlePageChange"
      @SizeChange="handleSizeChange"
    />
  </div>
</template>

<script>
import {
  courseTimeListByTeacher,
  courseInfoExport
} from '@/api'
import { queryFormConfig } from './config'
import QueryForm from '@/components/QueryForm'
export default {
  components: {
    QueryForm
  },
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      queryFormConfig,
      subtotalCountVo: {},
      subLoading: false,
      loadingExport: false,
      list: [],
      total: 0,
      filters: {},
      pagination: {
        page: 1,
        rows: 10
      },
      listLoading: false
    }
  },
  created() {
    this.getList(1)
  },
  methods: {
    handleSizeChange(value) {
      this.pagination.rows = value
      this.pagination.page = 1
      this.getList()
    },
    handlePageChange(value) {
      this.pagination.page = value
      this.getList()
    },
    getList(page) {
      if (page) {
        this.pagination.page = 1
      }
      this.listLoading = true
      courseTimeListByTeacher({
        param: { ...this.filters },
        pagination: this.pagination
      }).then(res => {
        this.listLoading = false
        this.list = res.record.paramList || []
        this.subtotalCountVo = res.record.courseTimeStudentStatistics
        this.total = res.totalCount
      }, () => {
        this.listLoading = false
      })
    },
    handleExport() {
      this.loadingExport = true
      courseInfoExport({
        param: { ...this.filters }
      }).then(res => {
        this.loadingExport = false
        if (res.errorCode !== '000000') return
        const a = document.createElement('a') // 创建一个a标签元素
        a.style.display = 'none' // 设置元素不可见
        a.href = res.record.showUrl // 设置下载地址
        document.body.appendChild(a) // 加入
        a.click() // 触发点击,下载
        document.body.removeChild(a) //
        this.$message.success(this.$t('message.dccg'))
      }, () => {
        this.loadingExport = false
      })
    },
    // 查找
    clear() {
      this.filters = {}
      this.getList(1)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.doumee-filter {
  display: flex;
}
.statics-info-li {
  margin-right: 10px;
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
  justify-content: center;
  text-align: left;
  .title {
    font-size: 15px;
    margin-right: 2px;
    text-align: left;
    // width: 7em;
    display: inline-block;
  }
  .content{
    text-align: left;
    display: inline-block;
    margin-right: 2px;
    color: $menuActive;
  }
}
.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}

.edit-btn {
  display: flex;
  flex-direction: row-reverse;
}
.title-style {
  font-size: 22px;
  font-weight: 500;
  line-height: 36px;
  color: #000;
  margin-bottom: 20px;
}
</style>
